<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单列表" name="first">
            <div style="margin-right:2%;">
                <span>状态：</span>
                <el-select v-model="status" style="width:150px;margin-left: 10px;" @change="animeDat(status)">
                    <el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
                <div style="position: relative;display: inline-block;margin: 5px;">
                    <span>订单号：</span>
                    <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入订单号"
                        v-model="ordersNo"></el-input>&nbsp;&nbsp;
                </div>
                <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">查询
                </el-button>
                <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans">重置
                </el-button>
                <!-- <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="exportBtn">导出
                </el-button> -->
            </div>
            <!-- <div style="color: orange;"> * 导出订单提示：导出订单前请进行时间或者状态等筛选，否则导出订单量过多易出现卡顿或系统崩溃</div> -->
            <el-table v-loading="tableDataLoading" :data="tableData.list" height="550">
                <el-table-column fixed prop="id" label="编号" width="80" fixed="left" />
                <el-table-column prop="orderNumber" label="订单号" width="150" />
                <el-table-column prop="userId" label="下单用户" width="150">
                    <template slot-scope="scope">
                        <span v-if="scope.row.userId">{{ scope.row.userName }}</span>
                        <span v-else>达拉达商城</span>
                    </template>
                </el-table-column>
                <el-table-column prop="shipperAddress" label="发货地" width="250" />
                <el-table-column prop="shipper" label="发货人姓名" width="100" />
                <el-table-column prop="shipperPhone" label="发货人电话" width="120" />
                <el-table-column prop="receiverAddress" label="收货地" width="250" />
                <el-table-column prop="receiver" label="收货人姓名" width="100" />
                <el-table-column prop="receiverPhone" label="收货人电话" width="120" />
                <el-table-column prop="riderName" label="司机姓名" width="100" />

                <el-table-column prop="pickupCode" label="取货码"></el-table-column>


                <el-table-column prop="transferPointInfo" label="货物当前位置" width="260">
                    <template slot-scope="scope">
                        <span v-if="scope.row.transferPointInfo">{{ scope.row.transferPointInfo.name }}</span>
                        <span v-else>暂无</span>
                    </template>
                </el-table-column>



                <el-table-column prop="expressCabinetPickupCode" label="当前中转点取货码" width="160"></el-table-column>


                <el-table-column prop="transferRecord" label="中转途径点(按顺序)" width="360">
                    <template slot-scope="scope">
                        <div v-if="scope.row.transferRecord && scope.row.transferRecord.length > 0">
                            <div v-for="(item , index) in scope.row.transferRecord" :key="index" class="transferRs">
                                <div class="transferR">
                                    {{index + 1}}</div>
                                <div>
                                    {{ item.transferPointName }}
                                </div>
                            </div>
                        </div>
                        <span v-else>暂无</span>
                    </template>
                </el-table-column>

                <el-table-column prop="transferRecord" label="中转途径点司机(按顺序)" width="180">
                    <template slot-scope="scope">
                        <div v-if="scope.row.transferRecord && scope.row.transferRecord.length > 0">
                            <div v-for="(item , index) in scope.row.transferRecord" :key="index" class="transferRs">
                                <div class="transferR">{{index + 1}}</div>
                                <div>{{ item.riderName }}</div>
                            </div>
                        </div>
                        <span v-else>暂无</span>
                    </template>
                </el-table-column>
                <el-table-column prop="originalOrderMoney" label="总费用(单位:元)" width="160">
                </el-table-column>
                <el-table-column prop="platformMoney" label="平台抽成(单位:元)" width="160">
                </el-table-column>
                <el-table-column prop="riderMoney" label="司机提成(单位:元)" width="160">
                </el-table-column>
                
                <el-table-column prop="createTime" label="创建时间" width="160">
                </el-table-column>
                <el-table-column prop="status" label="状态" fixed="right" width="160">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status=='0'" style="color: #d9730d;">待接单</div>
                        <div v-if="scope.row.status=='1'">待出库</div>
                        <div v-if="scope.row.status=='2'">配送中</div>
                        <div v-if="scope.row.status=='3'" style="color: #19c7de;">中转中</div>
                        <div v-if="scope.row.status=='4'">已完成</div>
                        <div v-if="scope.row.status=='11'">待付款</div>
                    </template>
                </el-table-column>
                <el-table-column prop="isRider" label="是否中转" fixed="right" width="80">
                    <template slot-scope="scope">
                        <div v-if="scope.row.transferPointId">是</div>
                        <div v-else>否</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="chakan(scope.row)" style="margin: 3px;">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 10px;float:right">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
                    layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
                </el-pagination>
            </div>
        </el-tab-pane>


        <!-- 骑手列表 -->
        <el-dialog title="订单详情" :visible.sync="dialogFormVisible" center width="70%">
            <div style="width: 100%;display: flex;">
                <div style="width: 70%;">
                    <el-descriptions :column="3" :labelStyle="{'textAlign':'right',}"
                        :contentStyle="{'paddingRight':'20px','height':'30px'}" :border="true">
                        <el-descriptions-item>
                            <template slot="label">
                                订单号:
                            </template>
                            {{form.orderNumber}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                下单用户:
                            </template>
                            {{form.userId?form.userName:'达拉达商城'}}
                        </el-descriptions-item>
                        <el-descriptions-item></el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                发货地:
                            </template>
                            {{form.shipperAddress}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                发货人:
                            </template>
                            {{form.shipper}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                发货人电话:
                            </template>
                            {{form.shipperPhone}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                收货地:
                            </template>
                            {{form.receiverAddress}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                收货人:
                            </template>
                            {{form.receiver}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                收货人电话:
                            </template>
                            {{form.receiverPhone}}
                        </el-descriptions-item>


                        <el-descriptions-item>
                            <template slot="label">
                                司机姓名:
                            </template>
                            {{form.riderName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                取货码:
                            </template>
                            {{form.pickupCode}}
                        </el-descriptions-item>
                        <el-descriptions-item></el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                货物当前位置:
                            </template>
                            {{form.transferPointInfo?form.transferPointInfo.name:'暂无'}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                当前中转点取货码:
                            </template>
                            <div style="font-weight: 700;">
                                {{form.expressCabinetPickupCode}}
                            </div>
                            
                        </el-descriptions-item>
                        <el-descriptions-item></el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                状态:
                            </template>
                            <div style="color: #08a4e8;">
                                {{form.status=='0'?'待接单':form.status=='1'?'待出库':form.status=='2'?'配送中':form.status=='3'?'中转中':form.status=='4'?'已完成':form.status=='11'?'待付款':''}}
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                是否中转:
                            </template>
                            {{form.transferPointId?'是':'否'}}
                        </el-descriptions-item>
                        <el-descriptions-item></el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                平台抽成(单位:元):
                            </template>
                            {{form.platformMoney}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                司机提成(单位:元):
                            </template>
                            {{form.riderMoney}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                总费用(单位:元):
                            </template>
                            <div style="color: red;font-weight: 700;">{{form.originalOrderMoney}}</div>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <div>
                    <div>
                        <el-card>
                            <div style="font-weight: 600;">{{form.shipperAddress}}</div>
                            <div>下单时间：{{form.createTime}}</div>
                        </el-card>
                    </div>
                    <div v-for="(item,index) in form.transferRecord" :key="index">
                        <div style="height: 70px;display: flex;align-items: center;">
                            <img src="../../assets/img/xiangxia.png" alt="" style="height: 100%;">
                            <div>
                                <div>司机：<i style="font-weight: 600;list-style: none;">{{item.riderName}}</i></div>
                                <div>配送距离：{{(item.distance / 1000).toFixed(2)}}km</div>
                            </div>
                        </div>
                        <el-card>
                            <div style="font-weight: 600;">{{item.transferPointName}}</div>
                            <div>完成时间：{{item.createTime}}</div>
                        </el-card>
                    </div>
                </div>
            </div>
        </el-dialog>
    </el-tabs>
</template>
<script>
    export default {
        data() {
            return {

                activities: [{
                    content: '活动按期开始',
                    timestamp: '2018-04-15'
                }, {
                    content: '通过审核',
                    timestamp: '2018-04-13'
                }, {
                    content: '创建成功',
                    timestamp: '2018-04-11'
                }],
                page: 1,
                limit: 10,
                classify: 1,
                ordersNo: '',
                imageUrl: '',
                dictLsit: [],
                url: '',
                status: '',
                parentName: '',
                parentParentName: '',
                activeName: 'first',
                tableDataLoading: true,
                tableData: [],
                checkBoxData: [], //多选框选择的值
                statesnum: [
                    {
                        label: '全部',
                        value: ''
                    },
                    {
                        label: '待接单',
                        value: 0
                    },
                    {
                        label: '待出库',
                        value: 1
                    },
                    {
                        label: '配送中',
                        value: 2
                    },
                    {
                        label: '中转中',
                        value: 3
                    },
                    {
                        label: '已完成',
                        value: 4
                    }
                ],
                indentType: '',
                flag: '',
                info: {
                    stockDate: this.getNowTime(), //日期
                },
                flags: [{
                    value: 'day',
                    label: '按天查询'
                }, {
                    value: 'month',
                    label: '按月查询'
                }, {
                    value: 'year',
                    label: '按年查询'
                }],
                phone: '',
                userData: {},
                phoneU: '',
                campus: '',
                ordersId: '',
                limit1: 10,
                page1: 1,
                dialogFormVisible: false,

                info2: {
                    stockDate2: this.getNowTime2(), //日期
                },
                startTime: '',
                endTime: '',
                tableDataLoadingU: false,
                form: {},
            }
        },
        methods: {

            getServiceIdsList(serviceIds) {
                if (!serviceIds) return '';
                return serviceIds.split(',').map(item => this.dictLsit.find(it => it.id == item).name).join('、');
            },


            // 多选
            changeFun(val) {
                this.checkBoxData = val
            },
            //处理默认选中当前日期
            getNowTime() {
                var now = new Date()
                var year = now.getFullYear() //得到年份
                var month = now.getMonth() //得到月份
                var date = now.getDate() //得到日期
                var hh = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
                var mm = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
                var ss = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
                month = month + 1
                month = month.toString().padStart(2, '0')
                date = date.toString().padStart(2, '0')
                var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
                return defaultDate
                this.$set(this.info, 'stockDate', defaultDate)
            },
            //处理默认选中当前日期
            getNowTime2() {
                var now = new Date()
                var year = now.getFullYear() //得到年份
                var month = now.getMonth() - now.getMonth() //得到月份
                var date = now.getDate() - now.getDate() + 1 //得到日期
                month = month + 1
                month = month.toString().padStart(2, '0')
                date = date.toString().padStart(2, '0')
                var defaultDate = `${year}-${month}-${date}`
                return defaultDate
                this.$set(this.info, 'stockDate', defaultDate)
            },
            // tabs切换
            handleClick(tab, event) {
                if (tab._props.label == '订单列表') {
                    this.page = 1
                    this.limit = 10
                    this.classify = 1
                    this.dataSelect()
                }
            },
            handleSizeChange(val) {
                this.limit = val
                this.dataSelect()
            },
            handleCurrentChange(val) {
                this.page = val
                this.dataSelect()
            },
            handleSizeChangeU(val) {
                this.limit1 = val;
                this.dataSelectUser()
            },
            handleCurrentChangeU(val) {
                this.page1 = val;
                this.dataSelectUser()
            },
            // 查询资源列表
            select() {
                this.page = 1
                this.limit = 10
                this.dataSelect()
            },
            // 重置资源列表
            cleans() {
                this.ordersNo = ''
                this.status = ''
                this.phone = ''
                this.indentType = ''
                this.page = 1
                this.flag = ''
                this.startTime = ''
                this.endTime = ''
                this.parentName = ''
                this.parentParentName = ''
                this.info.stockDate = this.getNowTime()
                this.dataSelect()
            },
            // select选择事件
            animeDat(state) {
                this.page = 1
                this.status = state
                this.dataSelect()
            },


            // 获取数据列表
            dataSelect() {
                this.tableDataLoading = true
                var endTime = this.endTime
                if (this.endTime != '') {
                    endTime = this.endTime + " 23:59:59"
                }
                this.$http({
                    url: this.$http.adornUrl('logisticsOrders/page'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'page': this.page,
                        'limit': this.limit,
                        'orderNumber': this.ordersNo,
                        'status': this.status
                    })
                }).then(({
                    data
                }) => {
                    console.log(data.page)
                    if (data && data.code === 0) {
                        this.tableDataLoading = false
                        let returnData = data.page
                        this.tableData = returnData
                    }
                })
            },

            // 订单分析选择日期
            animeOrder() {
                console.log('info', this.info)
                this.dataSelect()
                // this.colonel()
            },
            // 订单分析年月日
            orderfenxi(value) {
                this.page = 1
                let vanumber = value
                this.flag = value
                this.dataSelect()
            },
            // 查看弹框
            chakan(row) {
                console.log('row', row);

                this.ordersId = row.indentId
                this.form = row
                // this.dataSelectUser()
                this.dialogFormVisible = true
            },
            // 确认选择
            userBtns(row) {
                this.$http({
                    url: this.$http.adornUrl('adminerrand/transferOfOrder'),
                    method: 'post',
                    params: this.$http.adornParams({
                        'riderUserId': row.userId,
                        'indentId': this.ordersId,
                    })
                }).then(({
                    data
                }) => {
                    if (data.code == 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.dataSelect()
                                this.dialogFormVisible = false
                            }
                        })
                    } else {
                        this.$message({
                            message: data.msg,
                            type: 'warning',
                            duration: 1500,
                            onClose: () => { }
                        })
                    }


                })
            },
            // 获取数据列表
            dataSelectUser() {
                this.tableDataLoadingU = true
                this.$http({
                    url: this.$http.adornUrl('adminerrand/findAllUser'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'page': this.page1,
                        'limit': this.limit1,
                        // 'member': this.member,
                        'phone': this.phoneU,
                        'nickName': this.campus,
                        'userType': 2,
                        'invitationCode': '',
                        'platform': ''
                    })
                }).then(({
                    data
                }) => {
                    this.tableDataLoadingU = false
                    let returnData = data.data
                    this.userData = returnData
                })
            },
            // 查询
            selectU() {
                this.page = 1
                this.dataSelectUser()
            },
            // 重置
            cleansU() {
                this.page1 = 1
                this.campus = ''
                this.phoneU = ''
                this.dataSelectUser()
            },
            // 导出
            exportBtn() {

                var endTime = this.endTime
                if (this.endTime != '') {
                    endTime = this.endTime + " 23:59:59"
                }
                this.$http({
                    url: this.$http.adornUrl('adminerrand/exportExcelIndent'),
                    method: 'get',
                    responseType: 'blob',
                    params: this.$http.adornParams({
                        'indentType': this.indentType,
                        'indentNumber': this.ordersNo,
                        'indentState': this.status,
                        'date': this.info.stockDate,
                        'dateType': this.flag,
                        'phone': this.phone,
                        'startTime': this.startTime,
                        'endTime': endTime,

                    })
                }).then(({
                    data
                }) => {
                    let blob = new Blob([data], {
                        type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    })
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob)
                    } else {
                        let url = window.URL.createObjectURL(blob)
                        let elink = document.createElement('a')
                        elink.download = '订单列表.xlsx'
                        elink.style.display = 'none'
                        elink.href = url
                        document.body.appendChild(elink)
                        elink.click()
                        document.body.removeChild(elink)
                    }
                })
            },
        },
        mounted() {
            this.dataSelect()
        }
    }
</script>

<style scoped>
    .customWidth {
        width: 80% !important;
    }

    .transferRs {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .transferR {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #7a7a7a;
        border-radius: 50%;
        margin-right: 10px;
        color: #7a7a7a;
    }


    /* 如果需要深度覆盖样式 */
    ::v-deep .el-descriptions {
        border: 1px solid #ebeef5 !important;
    }

    ::v-deep .el-descriptions-item__label,
    ::v-deep .el-descriptions-item__content {
        border-right: 1px solid #ebeef5 !important;
        border-bottom: 1px solid #ebeef5 !important;
    }
</style>